<template>
	<view class="kuang">
		<image class="bj" src="/static/图层 1@3x.png" mode=""></image>
		<text class="title">发放优惠券</text>
	</view>
	<view class="jiantou"></view>

	<view class="quyi">
		<!-- 表单区域 -->
		<view class="form">
			<view class="form-item">
				<text class="label">优惠券名称</text>
				<input class="input" v-model="form.couponName" placeholder="请输入" />
			</view>

			<view class="form-item">
				<text class="label">优惠券类型</text>
				<radio-group class="type-row" :value="form.type" @change="onTypeChange">
					<label class="radio-item">
						<radio value="fullcut" />
						<text>满减券</text>
					</label>
					<label class="radio-item">
						<radio value="discount" color="#2a7dff" />
						<text>打折券</text>
					</label>
				</radio-group>
			</view>

			<view v-if="form.type==='discount'" class="form-item">
				<text class="label">折扣</text>
				<view class="discount-row">
					<text class="inline-text">打</text>
					<input class="discount-input" v-model="form.discount" type="number" placeholder="请输入" />
					<text class="inline-text">折</text>
				</view>
			</view>

			<!-- 满减券：满 X 元 减 Y 元 -->
			<view v-if="form.type==='fullcut'" class="form-item fullcut-item">
				<view class="fullcut-row">
					<text class="inline-text">满</text>
					<input class="amount-input" v-model.number="form.fullAmount" type="number" placeholder="请输入" />
					<text class="inline-text">元 减</text>
					<input class="amount-input" v-model.number="form.reduceAmount" type="number" placeholder="请输入" />
					<text class="inline-text">元</text>
				</view>
			</view>

			<view class="form-item">
				<text class="label">发放开始时间</text>
				<picker mode="date" :value="form.releaseStart" @change="onDateChange($event,'releaseStart')">
					<view class="picker">{{ form.releaseStart || '请选择' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">发放结束时间</text>
				<picker mode="date" :value="form.releaseEnd" @change="onDateChange($event,'releaseEnd')">
					<view class="picker">{{ form.releaseEnd || '请选择' }}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">投放数量</text>
				<input class="input short" v-model.number="form.totalCount" type="number" placeholder="张" />
				<text class="unit">张</text>
			</view>

			<view class="form-item">
				<text class="label">每人限领</text>
				<input class="input short" v-model.number="form.limitPerUser" type="number" placeholder="张" />
				<text class="unit">张</text>
			</view>

			<view class="form-item">
				<text class="label">使用有效期</text>
				<view class="range-row">
					<picker mode="date" :value="form.validStart" @change="onDateChange($event,'validStart')">
						<view class="picker small">{{ form.validStart || '开始时间' }}</view>
					</picker>
					<view class="gap"></view>
					<picker mode="date" :value="form.validEnd" @change="onDateChange($event,'validEnd')">
						<view class="picker small">{{ form.validEnd || '结束时间' }}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="footer">
			<button class="submit" type="default" @click="submit">确认投放</button>
		</view>
	</view>

</template>

<script setup>
import { ref } from 'vue'

const form = ref({
  couponName: '',
  type: 'fullcut',
  discount: '',
  fullAmount: undefined,
  reduceAmount: undefined,
  releaseStart: '',
  releaseEnd: '',
  totalCount: undefined,
  limitPerUser: undefined,
  validStart: '',
  validEnd: ''
})

const setType = (t) => {
  form.value.type = t
}

const onTypeChange = (e) => {
  form.value.type = e.detail.value
}

const onDateChange = (e, key) => {
  form.value[key] = e.detail.value
}

const submit = () => {
  if (!form.value.couponName) {
    uni.showToast({ title: '请输入名称', icon: 'none' })
    return
  }
  if (form.value.type === 'discount' && !form.value.discount) {
    uni.showToast({ title: '请输入折扣', icon: 'none' })
    return
  }
  if (form.value.type === 'fullcut' && (!form.value.fullAmount || !form.value.reduceAmount)) {
    uni.showToast({ title: '请填写满减金额', icon: 'none' })
    return
  }
  uni.showToast({ title: '已提交', icon: 'success' })
}

</script>

<style scoped>
	.bj {
		position: absolute;
		z-index: 1;
		width: 750rpx;
		height: 430rpx;
	}

	.kuang {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 35rpx;
		position: absolute;
		z-index: 2;
		color: white;
		margin-top: 60rpx;
	}

	.jiantou {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		border: 5rpx solid white;
		border-top: none;
		border-left: none;
		transform: rotate(135deg);
		margin-top: 60rpx;
		margin-left: 30rpx;
	}

	.quyi {
		position: absolute;
		z-index: 2;
		background-color: white;
		width: 710rpx;
		min-height: 920rpx;
		margin-top: 140rpx;
		margin-left: 20rpx;
		border-radius: 30rpx;
		border-bottom: 2rpx solid #f8f8f8;
	}

	.form {
		padding: 40rpx 28rpx 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 18rpx 0;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.label {
		width: 220rpx;
		color: #111;
		font-size: 28rpx;
	}

	.input {
		flex: 1;
		background: #ffffff;
		border: 2rpx solid #ededed;
		border-radius: 44rpx;
		padding: 18rpx 26rpx;
		font-size: 28rpx;
		color: #333;
	}

	.input.short {
		max-width: 220rpx;
	}

	.unit {
		margin-left: 16rpx;
		color: #666;
	}

	.type-row {
		display: flex;
		gap: 40rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		color: #333;
	}

	.discount-row {
		display: flex;
		align-items: center;
		gap: 18rpx;
	}

	.discount-input {
		width: 240rpx;
		border: 2rpx solid #ededed;
		border-radius: 44rpx;
		padding: 12rpx 22rpx;
		text-align: center;
	}

	/* 满减券样式 */
	.fullcut-item {
		justify-content: center;
	}
	.fullcut-row {
		display: flex;
		align-items: center;
		gap: 14rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
		width: 100%;
		justify-content: center;
	}

	.amount-input {
		width: 180rpx;
		border: 2rpx solid #ededed;
		border-radius: 44rpx;
		padding: 12rpx 22rpx;
		text-align: center;
	}

	.inline-text {
		color: #333;
		font-size: 28rpx;
	}

	.picker {
		flex: 1;
		background: #ffffff;
		border: 2rpx solid #ededed;
		border-radius: 44rpx;
		padding: 18rpx 26rpx;
		font-size: 28rpx;
		color: #666;
	}

	.picker.small {
		flex: none;
		min-width: 220rpx;
	}

	.range-row {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex-wrap: nowrap;
		width: 100%;
	}

	.gap {
		width: 10rpx;
	}

	.footer {
		padding: 30rpx 28rpx 40rpx;
	}

	.submit {
		width: 100%;
		background: linear-gradient(90deg, #2b77ff, #0556db);
		color: #fff;
		border-radius: 60rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
	}

</style>